"Random color change "
Bootstrap 4.1.1 Snippet by Ashwani Rawat

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Loading</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <link href="fonts/stylesheet.css" rel="stylesheet"> <link rel="shortcut icon" type="image/x-icon" href="http://gifimage.net/wp-content/uploads/2017/06/loading-gif-13.gif"> </head> <body> <!---------------------------------wraper--------------------------------> <div class="wrapper"> <div class="container"> <div class="input"> <input id="myInput" type="text" placeholder="text"/> <button onclick="myFunction()">Try it</button> <ul class="print-css" id="text-print"></ul> </div> </div> </div> <!---------------------------------End of wraper--------------------------------> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script> function myFunction() { var x = document.getElementById("myInput").value; var text=""; var randomColor = ""; for (i = 0; i < x.length; i++) { console.log(x[i]); var randomColor = "000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);}); text += "<li style='color:#"+randomColor+"; border:3px solid #"+randomColor+"'>"+x[i]+"</li>"; //text =+ x[i]; document.getElementById("text-print").innerHTML = text; } } </script> </body> </html>
.wrapper{float:left;width:100%;background: #000;color: #fff;} .input {display:block;margin:0 auto;text-align: center;padding: 20px 0;box-shadow: 1px 1px 51px 8px #642020;} .input input{font-family:arial;padding:10px;color: #000;box-shadow: 1px 1px 33px 8px #836c6c;border: 0;} .input button{font-family:arial;padding: 11px 10px;color: #000;background: #939393;border: 0;color: #fff;box-shadow: 1px 1px 33px 8px #836c6c;margin-left: -4px;} .print-css{display: block;width:100%;font-family:arial;background: white;color: #000;text-align: left;font-size: 30px;font-weight: 600; padding:0; list-style:none} .print-css li{display:inline-block;padding:10px;margin: 10px;}

Related: See More

Paper Kit 2
Change Password Form (With Validation)
Dynamic form fields - Add new field on focus or change
Flat color progress bars

Questions / Comments: